<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>图片绷带</title>
		<style>
			* {
				padding: 0;
				margin: 0;
			}

			body {
				height: 100vh;
			}

			#BigDiv {
				width: 200px;
				height: 200px;
				border: #000000 1px solid;
				overflow: hidden;
				user-select: none;
				font-size: 29px;
				transition-duration: 0.5s;
				line-height: 40px;
			}

			#Image {
				width: 100%;
				height: 100%;
				background-image: url(./image/image01.jpg);
				background-size: cover;
			}

			#column {
				width: 100%;
				height: 100%;
				background-color: #3EDBF0;
				float: left;
				margin-top: -100px;
				margin-left: -100px;
				transform: rotate(45deg);
				overflow: hidden;
			}

			#column01 {
				width: 100%;
				height: 100%;
				float: left;
				transform: rotate(315deg);
				margin-left: 141px;
				background-image: url(./image/image01.jpg);
				background-size: cover;
			}

			#column02 {
				width: 100%;
				height: 100%;
				transform: rotate(-45deg);
				margin-top: 10px;
				margin-left: 10px;

				/* 这个是绷带颜色 */
				background: rgba(0, 0, 0, 0.5);
			}

			#column02 span {
				text-align: center;
				display: block;

				/* 这是文本信息 */
				color: rgba(255, 255, 255, 1);
			}

			#BigDiv:hover {
				font-size: 33px;

			}

			#A {
				background-color: rgba(128, 128, 128, 0.4);
				width: 100%;
				height: 40px;
				transform: rotate(-45deg);
				position: relative;
				top: 25px;
				left: -60px;
			}

			#A span {
				text-align: center;
				display: block;
				font-size: 23px;
			}
		</style>
	</head>
	<body>

		<!-- 边框层 -->
		<div id="BigDiv">
			<!-- 绷带层 -->
			<div id="column">
				<!-- 绷带层 -->
				<div id="column01">
					<!-- 背景层 -->
					<div id="column02">
						<span>我是文本</span>
					</div>
				</div>
			</div>
			<!-- 背景层 -->
			<div id="Image"></div>
		</div>


		<!-- 快速定位 -->
		<div id="BigDiv">
			<div id="A">
				<span>我是文本</span>
			</div>
		</div>

	</body>
</html>
